<script setup lang="ts">
import { reactive, ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';
const echartsRef = ref(null);
let chart = null;
const settime = ref(null);
const childRef = ref(null);
let time = null;
const currentIndex = ref(0);
const emit = defineEmits(['clickData']);
const props = defineProps({
  option: {
    type: Object,
    default: {}
  },
  highlighting: {
    type: Boolean,
    default: true
  },
  isCarousel: {
    type: Boolean,
    default: false
  },
  index: {
    type: Number
  }
})

const resize = () => {
  chart && chart.resize();
}


const highlightPie = () => {
  clearLenFn()

  if (props.highlighting) {
    // 高亮当前图形
    chart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: currentIndex.value,
    })
  }


  emit('clickData', currentIndex.value)
}

//初始化
const initChart = () => {
  chart = echarts.init(echartsRef.value);
  chart.setOption(props.option);
  highlightPie()

  //点击高亮
  chart.on("click", (params) => {
    currentIndex.value = params.dataIndex
    highlightPie()
    time && clearInterval(time)
    setIntervalFn()
  })
  setIntervalFn()
}

const clickFn = (index) => {
  time && clearInterval(time)
  clearLenFn()
  chart.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: index,
  })
  currentIndex.value = index
  // setIntervalFn()
}

const clearLenFn = () => {
  // 遍历饼图数据，取消所有图形的高亮效果
  const dataLen = props.option?.series && props.option?.series[0]?.data || [];
  for (let idx in dataLen) {
    chart.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
      dataIndex: idx,
    })
  }
}


const setIntervalFn = () => {

  if (!props.isCarousel) return;
  // 全部都适用 pie、bar、line
  time = setInterval(function () {
    // 遍历饼图数据，取消所有图形的高亮效果
    const dataLen = props.option?.series && props.option?.series[0]?.data || [];
    for (let idx in dataLen) {
      chart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: idx,
      })
    }
    // 数据的长度
    if (currentIndex.value >= props.option.series[0].data.length) {
      currentIndex.value = 0;
    }
    chart.dispatchAction({
      type: "highlight", // 提示框
      seriesIndex: 0,
      dataIndex: currentIndex.value // 对第几个进行提示
    });
    emit('clickData', currentIndex.value)
    currentIndex.value += 1;
  }, 1000);
}



//监听option变化
watch(() => props.option, () => {
  if (!props.option) return
  chart && chart.setOption(props.option);
}, { deep: true })

// 指定哪个亮
watch(() => props.index, () => {
  chart && chart.dispatchAction({
    type: "highlight", // 提示框
    seriesIndex: 0,
    dataIndex: props.index
  });
})

onMounted(() => {
  settime.value = setTimeout(() => {
    initChart()
    window.addEventListener('resize', resize);
  }, 500);

});

onBeforeUnmount(() => {
  settime.value && clearTimeout(settime.value)
  window.removeEventListener('resize', resize);
  chart && chart.dispose();
  time && clearInterval(time);
})

defineExpose({
  clickFn
});


</script>

<template>
  <div class="echarts" ref="echartsRef">
  </div>
</template>

<style lang="less" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
